<template>
    <div>
      <el-row class="lock-btn">
        <el-input v-model="queryParams.openId" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入openId"></el-input>
        <el-input v-model="queryParams.orderId" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入订单号"></el-input>
        <el-input v-model="queryParams.lockMac" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入mac"></el-input>

        <el-button :disabled="userState" style="margin-left: 0.6%;margin-top: 0.2%;" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
      </el-row>

      

     
      <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
        <el-col :span="24">
          <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcredepositrequestTable" v-loading="loading" :data="list" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
            <el-table-column prop="id" label="id" width="" align="center">
            </el-table-column>  
            <el-table-column prop="openId" label="openId" width="" sortable align="center">
            </el-table-column>
            <el-table-column prop="orderId" label="订单号" width="" sortable align="center">
            </el-table-column>
                
            <el-table-column prop="lockMac" label="mac地址" width="" align="center">
            </el-table-column>
          
            
            <el-table-column prop="occTime" label="占位时间" width="" align="center">
            </el-table-column>
           
            <el-table-column prop="occFee" label="占位费金额" width="" align="center">
            </el-table-column>
            <el-table-column prop="type" label="是否缴纳" width="" align="center">
           <template slot-scope="{ row }">
          <el-tag
            v-if="row.type == 0"
            size="medium"
            type="danger"
            effect="dark"
            style="font-size: 14px"
            >未缴纳</el-tag
          >
          <el-tag
            v-else-if="row.type == 1"
            size="medium"
            type="success"
            effect="dark"
            style="font-size: 14px"
            >已缴纳</el-tag
          >
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">{{
            row.pay
          }}</el-tag>
           </template>
            </el-table-column> 
            <el-table-column prop="refundOccFee" label="退费金额" width="" align="center">
            </el-table-column>
            <el-table-column prop="refundOccDate" label="退费日期" width="" align="center">
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
          </el-pagination>
        </el-col>
      </el-row>
  

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" center width="1590px">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
      >
        <el-image 
             style="width:1536px;height:864px;"
            :src="url" 
            :preview-src-list="srcList">
            <div slot="error" class="image-slot" style="text-align:center">
                暂无图片
            </div>
        </el-image>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  
  </div>
  </template>
  
  <script>
   
  import { getNickName, getTestUserName,getRoleCode } from "../../util/auth";
  import { listLcOccFeeProcApi } from "../../api/oplog.js";
  
  export default {
    name: "oplog",
    data: function () {
      return {
        clientHeight:
          Math.max(
            document.documentElement.scrollHeight,
            document.body.scrollHeight
          ) -
          132 -
          5 +
          10 -
          28,
        labelWidth: "100px",
        loading: false,
        dialogTitle: "",
        pageNo: 1,
        pageSize:20,
        total: 0,
        multipleSelection: [],
        dialogFormVisible:false,
        dialogStatus: "",
        textMap: {
        update: "查看",
         create: "查看",
        },
        roleCode:'',
        queryParams:{
          orderId:'',
          lockMac:'',
          openId:''
        },
        addDialog:false,
        parkfieldList: [],
        status: '',
  
      };
    },
    methods: {
      editBtn (index, row) {
        let _this = this;
        _this.$nextTick(()=>{
          if(_this.$refs.form != undefined){
            _this.$refs.form.resetFields();
          }
        });
        _this.feeForm = row;
        _this.addDialog = true;
      },
      
      
      procRefund (index, row, status) {
        let _this = this;
        _this.loading = true;
        procRefundApi(row.id, status).then(resp => {
          console.log(resp)
          _this.loadAbnormalOrder(this.pageNo, this.pageSize);
          _this.$notify({
                title: "成功",
                message: "已处理",
                type: "success"
              });
        });
      },
      handlePageChange (pageSize) {
        this.pageSize = pageSize;
        this.listLcOccFeeProc(this.pageNo, this.pageSize);
      },
      handleNoChange (pageNo) {
        this.pageNo = pageNo;
        this.listLcOccFeeProc(this.pageNo, this.pageSize);
      },
      handleTableChange (val) {
        this.multipleSelection = val;
      },

      
      listLcOccFeeProc (pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
        listLcOccFeeProcApi( {
          pageNo:pageNo,
          pageSize:pageSize,
          orderid:_this.queryParams.orderid,
          openid:_this.queryParams.openid,
          lockMac:_this.queryParams.lockMac
        
        }).then(resp => {
            if (resp.errmsg === "ok") {
              console.log(resp.data.dataList);
              _this.total = resp.data.totalNum;
              _this.list = resp.data.dataList;
            }
            setTimeout(() => {
            _this.loading = false;
          }, 1 * 1000);
        });
      },

      handleUpdate(row) {
      this.url = '';
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp);
      this.dialogStatus = "查看";
      this.dialogFormVisible = true;
      console.log('1111111111111111111111111111111',this.url);
      this.url = row.vehicleUrl;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
  
      queryBtn () {
        let _this = this;
        _this.loading = true;
        const data = {
          orderId:_this.queryParams.orderId,
          lockMac:_this.queryParams.lockMac,
          openId:_this.queryParams.openId,
          pageNo:_this.pageNo,
          pageSize:_this.pageSize,
      };
      listLcOccFeeProcApi(data).then(resp => {
          _this.lcredepositrequests = resp.data;
          _this.total = resp.data.totalNum;
          _this.list = resp.data.dataList;
          _this.loading = false;
        });
      }
    },
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    mounted: function () {
      let _this = this;
      _this.roleCode = getRoleCode()
      this.$nextTick(function () {
        this.listLcOccFeeProc(_this.pageNo, _this.pageSize);
      });
    }
  }
  </script>
  
  <style scoped>
  .page-tool {
    background:#dfeaf9;
  }
  
  .page-tool div {
    text-align: right;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  </style>